<template>
  <div class="top">
    <el-icon
      size="30px"
      color="#6B7580"
      class="fold"
      @click="toggleCollapse"
      :class="[isCollapse ? 'just' : 'against']"
      ><fold
    /></el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/Index/home' }"
        >首页</el-breadcrumb-item
      >
      <template v-if="$route.path != '/Index/home'">
        <el-breadcrumb-item
          v-for="(item, index) in $route.matched.slice(1)"
          :key="index"
          >{{ item.meta.title }}</el-breadcrumb-item
        >
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
import { Fold, ArrowRight } from "@element-plus/icons-vue";
export default {
  components: { Fold, ArrowRight },
  data() {
    return {
      isCollapse: false, //折叠菜单
    };
  },
  setup() {
    return {
      Fold,
      ArrowRight, //图标
    };
  },
  methods: {
    //折叠菜单
    toggleCollapse() {
      this.isCollapse = !this.isCollapse; //取反
      this.$emit("toggleCollapse", this.isCollapse);
    },
  },
};
</script>

<style scoped lang="less">
.top {
  width: 100%;
  display: flex;
  align-items: center;
  height: 60px;
  // 图标
  .fold {
    margin: 0 20px;
  }
  // 图标旋转
  .just {
    transition: all 0.5s;
    transform: rotate(0deg);
  }
  .against {
    transform: rotate(-180deg);
    transition: all 0.5s;
  }
}
</style>